<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div>
    <div class="queryFormDiv">
      <el-form ref="queryForm" inline class="queryForm" size="small" label-width="120px">
        <el-form-item :label="`板厚(${boardThickness})`">
          <el-input v-model="queryParams[thicknessField + 'Start']" clearable style="width: 107px" />
          -
          <el-input v-model="queryParams[thicknessField + 'End']" clearable style="width: 107px" />
        </el-form-item>
        <el-form-item label="直径代码">
          <el-input v-model="queryParams.diameterCode" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="search" @click="handleQuery">查询</el-button>
          <el-button size="small" icon="refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="previewDiv">
      <el-table :data="dataList">
        <el-table-column type="expand" width="20px">
          <template #default="scope">
            <div style="padding-left: 60px; padding-right: 60px">
              <el-table :data="scope.row.fastenerInfoAllowableVoList" border height="280px" style="overflow-y: scroll">
                <el-table-column align="right" :label="`板厚(毫米)`" prop="thicknessMM">
                  <template #default="scopeSub"> {{ scopeSub.row.thicknessMM }}</template>
                </el-table-column>
                <el-table-column align="right" :label="`板厚(英寸)`" prop="thicknessInches">
                  <template #default="scopeSub"> {{ scopeSub.row.thicknessInches }}</template>
                </el-table-column>
                <el-table-column label="许用值" align="right" fixed="right">
                  <template #default="scopeSub">
                    <el-button
                      v-if="/^\d+$/.test(scopeSub.row.allowableValue)"
                      size="small"
                      link
                      type="primary"
                      @click="DimensionClickEvent(scope.row)"
                      >{{ scopeSub.row.allowableValue }}</el-button
                    >
                    <span v-else>N/A</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-for="item in defaultColunms" :key="item.label" :label="item.label" :prop="item.prop" :fixed="item.fixed" align="right">
          <template #default="scope">
            <span>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <dataDialog
      v-if="dialogVisible"
      :dialog-visible="dialogVisible"
      :fastener-grade-select="fastenerGradeSelect"
      :diameter-code-select="diameterCodeSelect"
      @handle-event="handleEvent"
    />
  </div>
</template>
<script setup>
import dataDialog from './dataDialog.vue';
import { getFastenerAllowable } from '@/api/fastenerData';

const props = defineProps(['activeName', 'selectTreeNodeId', 'fastenerGrade']);
const emit = defineEmits(['handleEvent']);
// 右侧查询条件
const queryParams = ref({
  fasteneraModelId: '',
  thicknessMMStart: '',
  thicknessMMEnd: '',
  thicknessInchesStart: '',
  thicknessInchesEnd: '',
  diameterCode: '',
  unit: 'metric'
});
const boardThickness = ref('毫米');
const strength = ref('牛顿');
const fastenerGradeSelect = ref('');
const diameterCodeSelect = ref('');
const dataList = ref([]);
const dialogVisible = ref(false);
const loading = ref(false);
// 获取表格数据
const getListData = (data) => {
  loading.value = true;
  if (data) {
    queryParams.value.fasteneraModelId = data;
  }
  getFastenerAllowable(queryParams.value).then((res) => {
    const result = res && res?.data;
    if (result) {
      dataList.value = result;
    }
    loading.value = false;
  });
};
watch(
  () => [props.activeName, props.selectTreeNodeId, props.fastenerGrade],
  ([newActiveNamea, newSelectTreeNodeId, newFastenerGrade]) => {
    if (newActiveNamea === 'first') {
      boardThickness.value = '毫米';
      strength.value = '牛顿';
      queryParams.value.unit = 'metric';
    } else if (newActiveNamea === 'second') {
      boardThickness.value = '英寸';
      strength.value = '磅';
      queryParams.value.unit = 'imperial';
    }
    if (newSelectTreeNodeId && newFastenerGrade) {
      fastenerGradeSelect.value = newFastenerGrade;
      getListData(newSelectTreeNodeId);
    }
  },
  { immediate: true, flush: 'post' }
);
watch(
  () => queryParams.value.unit,
  (newUnit) => {
    queryParams.value = {
      ...queryParams.value,
      // 切换时自动转换值（如果需要可以添加转换逻辑）
      thicknessMMStart: '',
      thicknessMMEnd: '',
      thicknessInchesStart: '',
      thicknessInchesEnd: ''
    };
  }
);
const thicknessField = computed(() => {
  return queryParams.value.unit === 'metric' ? 'thicknessMM' : 'thicknessInches';
});
const defaultColunms = computed(() => [
  { label: '直径代码', prop: 'diameterCode', fixed: null },
  { label: `紧固件单剪强度(${strength.value})`, prop: 'shearStrength', fixed: null },
  { label: `紧固件剪切失效的最薄板厚度(${boardThickness.value})`, prop: 'thickness2shear', fixed: null },
  { label: `名义直径(${boardThickness.value})`, prop: 'nominalDiameter', fixed: null },
  { label: `紧固件头部高度(${boardThickness.value})`, prop: 'headHeight', fixed: null }
]);
const handleQuery = () => {
  if (queryParams.value.fasteneraModelId === '') {
    return;
  }
  getListData();
};
const resetQuery = () => {
  if (queryParams.value.fasteneraModelId === '') {
    return;
  }
  queryParams.value = {
    fasteneraModelId: '',
    thicknessMMStart: '',
    thicknessMMEnd: '',
    thicknessInchesStart: '',
    thicknessInchesEnd: '',
    diameterCode: ''
  };
  queryParams.value = {
    ...queryParams.value,
    [thicknessField.value + 'Start']: '',
    [thicknessField.value + 'End']: '',
    diameterCode: ''
  };
  getListData(props.selectTreeNodeId);
};
const DimensionClickEvent = (row) => {
  dialogVisible.value = true;
  diameterCodeSelect.value = row.diameterCode;
};
const handleEvent = () => {
  dialogVisible.value = false;
  diameterCodeSelect.value = '';
};
</script>
<style lang="scss" scoped>
.queryFormDiv {
  margin-right: 5px;
  .queryForm {
    border: 1px solid #dddddd7a;
    padding: 20px 20px 10px 20px;
  }
}
.previewDiv {
  border: 1px solid #dddddd7a;
  padding: 20px 20px 10px 20px;
  margin-top: 10px;
}
</style>
